<template>
    <div class="item-box">
        <router-link
                v-if="to"
                class="item"
                :to="to">
            <div class="body">
                <slot></slot>
            </div>
            <div class="fx">
                &#xe701;
            </div>
        </router-link>
        <div
                v-else
                class="item">
            <div class="body">
                <slot></slot>
            </div>
        </div>
        <div class="border" :style="{
            height: border ? border + 'px': '1px'
        }"></div>
    </div>
</template>

<script>
    export default {
        name: "item",
        props: ['to', 'border']
    }
</script>

<style scoped lang="less">
    @import "../assets/css/bases";
    .item {
        padding: 10px;
        color: @primary;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .body {
            flex: 1;
            margin-right: 5px;
        }
        .fx {
            color: @gray;
            flex: 0 0 15px;
        }
    }
    .border {
        background: #f1f1f1;
        width: 100%;
    }
</style>